<template>
  <div class="logintext-box">
      <van-field
       v-model="content" 
      :label="label"  
      :type="type"
      :placeholder="placeholder"
      :rule="rule"
      @focus="onFocus"
      @blur="onBlur"
      :error-message= "errMsg"
      />
  </div>
</template>

<script>
export default {
props:['label' , 'type' , 'placeholder' , 'rule' ,'errMsg'] ,
 methods : {
   jugRule () {
     const rue = new RegExp(this.rule)
     if(rue.test(this.content)) {
       this.$emit('inputContent' , this.content)
     } else {
       this.$emit('inputContent' , '')
     }
   } ,
   onFocus() {
      this.$emit('onfocus' )
   } ,
   onBlur() {
     this.$emit('outfocus' )
   }
 } ,
data() {
  return {
    content : '' 
  }
} ,
watch : {
  content () {
    this.jugRule () 
  }
}
}
</script>

<style lang = "less" >
.logintext-box {
  padding: 0 7vw;
}
.van-field {
    height: 3vw;
    font-size: 1vw !important;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(173, 173, 173); 
   
}

</style>